<template>
  <!-- 详情页-->
  <div class="Details navBar">
    <van-nav-bar :title="topTitle" left-arrow>
      <template #left>
        <van-image
          v-if="!EditDetails"
          width="17"
          height="17"
          fit="contain"
          :src="require('assets/images/BackIcon.png')"
          @click="handleGoBack"
        />
        <div
          v-if="EditDetails"
          class="van-ellipsis"
          style="color:#0098FF;font-size: 17px;"
          @click="CancelDditing"
        >取消</div>
      </template>

      <template #right>
        <van-image
          v-if="!EditDetails"
          width="17"
          height="17"
          fit="contain"
          :src="require('assets/images/edit-icon.png')"
          @click="handleEditStreet"
        />
        <div
          v-if="EditDetails"
          class="van-ellipsis"
          style="color:#0098FF;font-size: 17px;"
          @click="SaveDetails"
        >完成</div>
      </template>
    </van-nav-bar>

    <div class="overflow">
      <div class="details">
        <div class="BasisDetails">
          <div class="title" v-if="listData.cloudFileInfo || listData.cloudDirectoryInfo">
            <van-image
              width="25"
              height="25"
              style="margin-right:10px"
              :src="require('assets/images/file.png')"
            />
            <div class="van-ellipsis" v-if="listData.cloudFileInfo">{{listData.cloudFileInfo.name}}</div>
            <div class="van-ellipsis" v-else>{{listData.cloudDirectoryInfo.name}}</div>

          </div>
          <div class="basic" v-if="listData.cloudFileInfo">
            <div class="basicClass">创建人：</div>
            <div class="van-ellipsis">{{listData.cloudFileInfo.uploadName || ''}}</div>
          </div>
          <div class="basic" v-if="listData.cloudFileInfo || listData.cloudDirectoryInfo">
            <div class="basicClass">创建时间：</div>
            <div class="van-ellipsis" v-if="listData.cloudFileInfo">{{listData.cloudFileInfo.createTime}}</div>
            <div class="van-ellipsis" v-else>{{listData.cloudDirectoryInfo.createTime}}</div>
          </div>
          <div class="basic" v-if="listData.cloudFileInfo == ''">
            <div class="basicClass">大小：</div>
            <div class="van-ellipsis">{{listData.cloudFileInfo.fileSize | fileSize}}</div>
          </div>
        </div>
      </div>

      <!-- 拓展属性 -->
      <div class="details">
        <div class="BasisDetails detailiscell">
          <div class="title">
            <div class="van-ellipsis">扩展属性</div>
          </div>

          <div class="basic">
            <div class="kong" v-show="!isEditSelect && fileTypeName == ''">无</div>

            <div class="basicClass" v-if="fileTypeName != '' || isEditSelect">自定义类型：</div>
            <div class="van-ellipsis" v-if="!isEditSelect && fileTypeName != ''">{{fileTypeName}}</div>

            <van-field
            class="divType"
              readonly
              clickable
              v-if="isEditSelect"
              name="picker"
              :value="fileTypeName"
              placeholder="点击类型"
              @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="columns"
                @confirm="onConfirm"
                @cancel="showPicker = false"
              />
            </van-popup>
          </div>

          <div
            class="basic"
            v-for="(fileTypeAttributeValue, index) in fileTypeAttributeList"
            :key="index"
          >
            <div class="basicClass">{{fileTypeAttributeValue.attributeCn}}：</div>
            <div v-if="!isEditStreet" class="van-ellipsis">{{fileTypeAttributeValue.value}}</div>
            <van-field
              v-if="isEditStreet && fileTypeAttributeValue.dataType==2"
              v-model="fileTypeAttributeValue.value"
              placeholder="请输入内容"
            />
            <van-field
              v-if="isEditStreet && fileTypeAttributeValue.dataType == 1"
              readonly
              clickable
              name="datetimePicker"
              :value="fileTypeAttributeValue.value"
              placeholder="点击选择时间"
              @click="showtime = true"
            />
            <van-popup v-model="showtime" position="bottom">
              <van-datetime-picker type="datetime" @confirm="onContime" @cancel="showtime = false" />
            </van-popup>
          </div>
        </div>
      </div>
      
      <!-- 标签 -->
      <div class="BasisDetails">
        <div class="title">
          <div class="van-ellipsis">标签</div>
        </div>
        <div class="basic detailistag backroundtag" v-if="listData.tag">
          <div
            v-for="(listDatatag, index) in tagList"
            :key="index"
            style="margin-right:20px"
          >
            <van-tag
              closeable
              round
              size="medium"
              type="primary"
              @close="close(index)"
            >{{listDatatag}}</van-tag>
          </div>
      
           <van-image width="22" height="22" :src="require('assets/images/NewLabel.png')" @click="newlyaddedtag" />
          <!-- 编辑dialog -->
          <van-dialog
            class="editDialog"
            v-model="editDialogVisible"
            title="新增标签名称"
            show-cancel-button
            closeOnClickOverlay
            @confirm="handleConfirmClick"
          >
            <van-field v-model="editDialogValue" placeholder="请输入标签名称" />
          </van-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Details",
  props: {
    DetailObj: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      topTitle: "详情信息",

      // 详情信息数据列表
      listData: {},
      //详情信息基本数据数组
      listbasic: [
        { title: "创建人：", name: "" },
        { title: "创建时间：", name: "" },
        { title: "大小：", name: "" }
      ],

      // 文件类型ID
      fileTypeId: "",
      // 文件类型名称
      fileTypeName: "",

      // 扩展属性集合
      fileTypeAttributeList: [
        {
          fileTypeAttributeValue: {
            id: "",
            value: ""
          }
        }
      ],
      // 测试点击编辑内容变化为select
      isEditSelect: false,
      //测试点击编辑内容变化为input
      isEditStreet: false, // 编辑街道
      //控制编辑状态顶部显隐
      EditDetails: false,

      //文档类型选择器
      fileTypeName: "",
      columns: [],
      showPicker: false,

      //扩展属性时间
      showtime: false,

      //文件ID或文件夹ID
      // resourcesId: (this.DetailObj.cloudFileInfo == null ? this.DetailObj.cloudDirectoryInfo.directoryId : this.DetailObj.cloudFileInfo.fileId) || this.DetailObj.fileId,
      resourcesType: this.DetailObj.eFileResultType || this.DetailObj.type,

      // 自定义类型名称
      attributeIsInsert: false,

      // 新增标签显示弹窗判断
      editDialogVisible: false,
      editDialogValue: "", //新增标签名字
      tagList: [],
    };
  },
  created(){
    this.DocumenDetails();
  },
  methods: {
    DocumenDetails() {
      this.$request({
        method: "get",
        url: "/api/General/getFileDetails",
        params: {
          Token: sessionStorage.getItem("mobileToken"),
          resourcesId: this.resourcesId,
          resourcesType: this.resourcesType
        }
      }).then(({data}) => {
        if (data.code == 200) {
          if(data.data.tag.tagList == null){
            this.tagList = [];
          }else{
            this.tagList = data.data.tag.tagList;
          }

          // 处理创建时间格式
          if(data.data.cloudFileInfo != null){
            let time = data.data.cloudFileInfo.createTime.split('T')
            data.data.cloudFileInfo.createTime = time[0] + ' ' + time[1]
            
            this.listData = data.data;

          }else{
            let time = data.data.cloudDirectoryInfo.createTime.split('T')
            data.data.cloudDirectoryInfo.createTime = time[0] + ' ' + time[1]
            this.listData = data.data
          }
          

          //文件类型与文件名称赋值
          this.fileTypeId =
            data.data.fileTypeId == 0 ? "" : data.data.fileTypeId;
          for (let i = 0; i < this.listData.fileTypeList.length; i++) {
            this.columns[i] = this.listData.fileTypeList[i].fileTypeName;
            if (this.fileTypeId == this.listData.fileTypeList[i].fileTypeId) {
              this.fileTypeName = this.listData.fileTypeList[i].fileTypeName;
            }
          }
          //扩展属性集合复制
          this.fileTypeAttributeList = this.listData.fileTypeAttributeValues;
        } else {
          this.$toast.fail("加载数据失败，请重试。");
        }
      });
    },
    // 左侧点击事件
    handleGoBack() {
      this.$emit('handleGoBack', false)
    },
    //编辑事件
    handleEditStreet() {
      this.isEditSelect = true;
      this.isEditStreet = true;
      this.EditDetails = true;
    },
    //取消编辑
    CancelDditing() {
      this.isEditSelect = false;
      this.isEditStreet = false;
      this.EditDetails = false;
      this.DocumenDetails();
    },
    //保存详情事件
    SaveDetails() {
      this.isEditSelect = false;
      this.isEditStreet = false;
      this.EditDetails = false;
      let tagId = 0;
      if (
        this.listData.tag != null &&
        this.listData.tag.fileTag != null &&
        this.listData.tag.fileTag.tagId != null
      ) {
        tagId = this.listData.tag.fileTag.tagId;
      }

      let type = this.listData.cloudFileInfo != null ? 1 : 2;

      if (!this.attributeIsInsert) {
        this.$request({
          method: "post",
          url:
            "/api/General/updateFileDetails?Token=" +
            sessionStorage.getItem("mobileToken"),
          data: {
            ResourcesId: this.resourcesId,
            FileTypeAttributeValues: this.fileTypeAttributeList,
            Tags: this.tagList, 
            FileTag: {
              ResourceId: this.resourcesId,
              Type: type
            },
            AttributeIsInsert: this.attributeIsInsert
          }
        }).then(({ data }) => {
          if (data.code == 200) {
            this.DocumenDetails();
          } else {
            this.$toast.fail("加载数据失败，请重试。");
          }
        });
      } else {
        this.$request({
          method: "post",
          url:
            "/api/General/updateFileDetails?Token=" +
            sessionStorage.getItem("mobileToken"),
          data: {
            ResourcesId: this.resourcesId,
            FileTypeAttributes: this.fileTypeAttributeList,
            Tags: this.tagList, 
            FileTag: {
              ResourceId: this.resourcesId,
              Type: type
            },
            AttributeIsInsert: this.attributeIsInsert
          }
        }).then(({ data }) => {
          if (data.code == 200) {
            this.DocumenDetails();
          } else {
            this.$toast.fail("加载数据失败，请重试。");
          }
        });
      }
    },
    //自定义类型选择器事件
    onConfirm(value, index, label) {
      this.fileTypeName = value;
      this.showPicker = false;
      for (let i = 0; i < this.listData.fileTypeList.length; i++) {
        if (value == this.listData.fileTypeList[i].fileTypeName) {
          this.changeFileType(this.listData.fileTypeList[i].fileTypeId);
        }
      }
    },

    // 选中自定义类型值发生变化时触发
    changeFileType(id) {
      //获得扩展属性
      this.$request({
        method: "get",
        url: "/api/General/GetFileTypeList",
        params: {
          Token: sessionStorage.getItem("mobileToken"),
          fileTypeId: id
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.fileTypeAttributeList = data.data.fileTypeAttributeList;
          this.attributeIsInsert = true;
        } else {
          this.$toast.fail("加载数据失败，请重试。");
        }
      });
    },
    //删除标签事件
    close(type) {
      this.tagList.splice(type, 1);
    },
    //新增标签事件
    newlyaddedtag() {
      this.editDialogVisible = true;
    },
    // 新增标签确定提交事件
    handleConfirmClick() {
      // console.log(this.listData)
      if(this.editDialogValue.trim() == '') return;
      let TagName = this.editDialogValue;
      this.tagList.push(TagName);
      if(this.listData.tag.fileTag!=null){
        this.$request({
          method: "post",
          url:
            "/api/General/TagsEdit?Token=" +
            sessionStorage.getItem("mobileToken"),
          data: {
            TagId: this.listData.tag.fileTag.tagId,
            Tags: this.tagList
          }
        }).then(({ data }) => {
          if (data.code == 200) {
            this.DocumenDetails();
          } else {
          }
        });
      }else{
        this.$request({
          method: 'post',
          url: "/api/General/TagsEdit?Token=" + sessionStorage.getItem("mobileToken"),
          data: {
            FileTag: {
                  ResourcesId: this.resourcesId,
                  Type: this.resourcesType
                },
            Tags: this.tagList
          }
        }).then(res => {
              if (res.data.code == 200) {
                this.DocumenDetails();
              } else {
                
              }
            });
      }
      
    },
    //时间转换
    onContime(time) {
      const d = time;
      const newDate =
        d.getFullYear() +
        "-" +
        (d.getMonth() + 1) +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();

      for (let k = 0; k < this.fileTypeAttributeList.length; k++) {
        if (this.fileTypeAttributeList[k].dataType == 1) {
          this.fileTypeAttributeList[k].value = newDate;
        }
      }

      this.showtime = false;
    }
  },
  computed: {
    //文件ID或文件夹ID
    // resourcesId(){
    //   console.log(this.DetailObj.fileId)
    //   return this.DetailObj.fileId
    // },
    // resourcesType(){
    //   return this.DetailObj.type
    // }
    resourcesId(){
      // console.log(this.DetailObj)
      if(this.DetailObj.cloudFileInfo || this.DetailObj.cloudDirectoryInfo){
        let id = this.DetailObj.cloudFileInfo == null ? this.DetailObj.cloudDirectoryInfo.directoryId : this.DetailObj.cloudFileInfo.fileId
        return id
      }else{
        return this.DetailObj.fileId
      }
    },
    // resourcesType(){

    // }
  },
  watch: {
    editDialogVisible(newVal) {
      if (!newVal) {
        this.editDialogValue = "";
      }
    },
    // 'DetailObj.fileId'(newVal){
    //   console.log(newVal)
    //   this.resourcesId = newVal
    // },
    DetailObj: {
      deep: true,
      handler(newVal) {
        this.resourcesId = (newVal.cloudFileInfo == null ? newVal.cloudDirectoryInfo.directoryId : newVal.cloudFileInfo.fileId) || newVal.fileId
        console.log(newVal)
        console.log(this.resourcesId)

        this.resourcesType = newVal.eFileResultType || newVal.type
        console.log(this.resourcesType)
      }
    },
    // 'DetailObj.eFileResultType'(newVal){
    //   console.log(newVal)
    //   this.resourcesType = newVal
    // }
    // DetailObj: {
    //   handler(newVal){
    //     console.log(newVal)
    //     this.resourcesId = newVal.fileId
    //      this.resourcesType = newVal.type
    //   },
    //   deep: true
    // }
  },
  filters: {
    // 文件大小
    fileSize(val){
      if (!val) {
        return ""
      }
      if (val === 0) return " 0 B";
      let k = 1024;
      var sizes = ["KB", "MB", "GB", "TB"],
        i = Math.floor(Math.log(val) / Math.log(k));
      return (val / Math.pow(k, i)).toPrecision(3) + " " + sizes[i]
    }
  }
};
</script>

<style lang="less" scoped>
.Details /deep/ .van-field__control{
  padding: 0 5px;
}
.divType /deep/ .van-field__body::after{
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -2.5px;
  background: url('../../assets/images/down_jt.png') no-repeat;
  background-size: cover;
}
.detailiscell /deep/ .van-cell {
  width: auto;
  line-height: 22px;
  padding: 0;
  border: 1px solid #aab3bc;
  border-radius: 4px;
}
.detailistag /deep/ .van-tag {
  height: 22px;
  color: #0099ff;
  padding: 0 10px;
}
.backroundtag /deep/ .van-tag--primary {
  background-color: #eff9ff;
}
.overflow {
  height: calc(100vh-30px);
  overflow-y: auto;
}
.navBar /deep/ .van-nav-bar__title {
  font-size: 18px;
  color: #2a2b2d;
  font-weight: 600;
}

.Details{
  // margin: 0 -15px;
}
.details {
  background-color: #f8f8f8;
  padding-bottom: 8px;
}
.BasisDetails {
  background-color: #fff;
  font-size: 14px;
  color: #2a2b2d;
  padding: 20px 15px;

  .title {
    display: flex;
    align-items: center;
    font-size: 17px;
    color: #2a2b2d;
    padding-bottom: 15px;
  }
  .basic {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #2a2b2d;
    margin-bottom: 12px;

    .basicClass {
      width: 90px;
      font-size: 14px;
      color: #a5aeb7;
    }
  }
}
</style>